<template>
  <div class="container">
    <div class="ceshi">
      <div>测试账号：18222155748</div>
      <div>测试密码：123</div>
    </div>
    <div class="header">登录</div>
    <div class="login-wrapper">
      <div class="form-wrapper">
        <input type="text" name="username" placeholder="用户名" class="input-item" @input="accountInput">
        <input type="password" name="password" placeholder="密码" class="input-item1" @input="infoInput">
        <div class="btn" @click="commit">立即登录</div>
      </div>
      <div class="msg">
        还没有账号？
        <div @click="register" class="register">注册</div>
      </div>
    </div>
  </div>
</template>

<script>

import {requestGetToken} from "../network/request";

export default {
  name: "product",
  components: {

  },
  data() {
    return {
      acc: '',
      code: ''
    }
  },
  methods: {
    register(){
      this.$router.replace('register')
    },
    commit() {
      let acc = this.acc
      let code = this.code
      if(!(acc||code)){
        this.$toast('请完善信息！')
      }else {
        requestGetToken([acc,code]).then(res =>{
          console.log(res)
          if(res.data.msg=='登录成功'){
            this.$toast('登录成功！')
            setTimeout(()=>{
              localStorage.setItem('token',res.data.obj);
              this.$router.push('info')
            },1000)
          } else if(res.data.msg=='账号不存在'){
            this.$toast('账号不存在！')
          }else if(res.data.msg=='密码错误')
          {
            this.$toast('密码错误！')
          }
        })
      }
    },
    accountInput(e) {
      this.acc = e.target.value
    },
    infoInput(e) {
      this.code = e.target.value
    },
  },
  mounted() {
  }
}
</script>

<style scoped>
.ceshi{
  position: absolute;
  font-size: 25px;
  color: white;
  margin-top: 20px;
}
.register{
  color: #abc1ee;
}
.container {
  height: 100vh;
  width: 100%;
  background: url("../../src/assets/image/login.png") no-repeat;
  background-size:100% 100%;
  margin: 0;
  padding: 0;
}
.form-wrapper{
  display: flex;flex-direction: column;
  align-items: center;
}
.login-wrapper {
  margin-top: 420px;
  border-radius: 15px;
  position: relative;
}
.header {
  color: white;
  font-size: 38px;
  /*width: 100%;*/
  align-items: center;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
}
.input-item {
  border-radius: 20px;
  display: inline-block;
  width: 250px;
  opacity: 0.6;
  height: 35px;
  color: #FFB260;
  text-align: center;

  background:url("../../src/assets/image/data.png") no-repeat #323659 ;
  background-position: 15px;
  background-size:22px 22px;
  margin-bottom: 20px;
  border:2px solid #FFB260;
  font-size: 15px;
}
.input-item1 {
  border-radius: 20px;
  display: block;
  width: 250px;
  opacity: 0.6;
  height: 35px;
  color: #FFB260;
  text-align: center;

  background: #323659 url("../../src/assets/image/account.png") no-repeat;
  background-position: 15px;
  background-size: 22px 22px;
  margin-bottom: 10px;
  border:2px solid #FFB260;
  font-size: 15px;
}
.input-item::placeholder {
  text-transform: uppercase;
}
.btn {
  text-align: center;
  padding: 10px;
  width: 220px;
  margin-top: 20px;
  background-color: #FFB260;
  color: white;
  border-radius: 15px;
  font-size: 20px;
}
.msg {
  display: flex;
  justify-content: center;
  text-align: center;
  line-height: 88px;
  color: white;
}
a {
  text-decoration-line: none;
  color: #abc1ee;
}
</style>

